<template>
	<view class="pg">
		<image class="banner" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/wechat_banner.png" mode=""></image>
		<view class="contant">
			<view class="contant_t">
				<image class="banner1" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/wechat_banner1.png" mode=""></image>
				<view class="info">
					<image class="header" :src="runinfo.Cover" mode=""></image>
					<view class="info_item">
						<view class="top">
							{{runinfo.Title}}
							<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/group_logo.png" mode=""></image>
						</view>
						<view class="bot">
							<text>ID:{{runinfo.IdCode}}</text>
							<text>{{runinfo.City}}</text>
						</view>
					</view>
				</view>

				<!-- 二维码 -->
				<image class="ewm" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/wechat_ewm.png" mode=""></image>
			</view>
		</view>
		<!-- 分享 -->
		<view class="share">
			<view class="top">
				<view class="line"></view>
				<text>分享卡片给好友</text>
				<view class="line"></view>
			</view>
			<view class="bot">
				<view class="bot_l">
					<button open-type="share">
						<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/wechat_friend.png" mode=""></image>
						<text>微信好友</text>
					</button>
				</view>
				<view class="bot_l" @tap="result">
					<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/wechat_down.png" mode=""></image>
					<text>保存图片</text>
				</view>
			</view>
		</view>
		<image style="width: 272px;height: 337px;" :src="base" mode=""></image>
		<canvas ref="certcover" canvas-id="myCanvas" id="mycan" style="width: 272px;height: 337px;"></canvas>
		<!-- <div class='box' id="box_can"></div> -->
	</view>
</template>

<script>
import uniPopup from '../discover/unipopup';
import { pathToBase64, base64ToPath } from '@/js_sdk/gsq-image-tools/image-tools';
export default {
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			 // console.log (res.target);
		}
		return {
			title: '这个跑团还不错哦，快来参加吧',
			path: '/pageB/run/runcard'
		};
	},
	components: { uniPopup },
	data() {
		return {
			base: '',
			img_src: {
				header: require('../../static/othertwo/wechat_header.png'),
				vip: require('../../static/othertwo/group_logo.png'),
				ewm: '../../static/othertwo/wechat_ewm1.png',
				banner: '../../static/othertwo/wechat_banner1.png',
				banner_p:'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/wechat_banner1.png',
				header_p :'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/wechat_friend.png',
				vip_p :'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/group_logo.png',
				ewm_p:'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/wechat_ewm1.png'
			},
			clubid:'' ,
			info: {
				title: '合肥官方跑团一群',
				id: 'ID:4515',
				city: '合肥市'
			},
			runinfo: {},
			user_head:''
		};
	},
	onLoad(options) {
		this.clubid = options.clubid
	},
	mounted() {
		//this.result();
		this.getrunInfo()
	},
	methods: {
		// 获取跑团信息
		getrunInfo () {
			this.ajax('club/clubInfo',{
				data:{
					id: this.clubid
				},
				success:res => {
					 // console.log (res)
					this.runinfo = res.msg
				},
				
			})
		},
		// canvas保存图片
		result () {
			const ctx = uni.createCanvasContext('myCanvas')
			// 设置背景
			ctx.drawImage(this.banner_p,0 ,0 ,272,337)
			
			// 设置头像
			ctx.drawImage(this.header_p, 30,20,63,63)
			ctx.draw()
			setTimeout(() => {
				uni.canvasToTempFilePath ({
					x: 0,
					y: 0,
					width: 272,
					height: 337,
					destWidth: 272,
					destHeight: 337,
					canvasId: 'myCanvas',
					success: res => {
						 // console.log (res,111)
						this.base = res.tempFilePath
					}
				})
			}, 800);
		},
		downimg() {
			uni.saveImageToPhotosAlbum({
				filePath: this.base,
				success: () => {
					this.toast('保存成功');
				}
			});
		},
		// 分享
		toshare() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				success: function(res) {
					 // console.log ('success:' + JSON.stringify(res));
				},
				fail: function(err) {
					 // console.log ('fail:' + JSON.stringify(err));
				}
			});
		},
		downImg(url) {
		//       var img = this.$refs.certcover;
		//       this.width = img.width;
		//       this.height = img.height;
		//       //生成图片
		//  // console.log (img.width)
		      var image = new Image();
		      image.setAttribute('crossorigin', 'anonymous');
		      image.onload = () => {
		        //绘画
		        var canv = document.createElement("canvas")
		        canv.width = image.width;
		        canv.height = image.height;
		        var ctx = canv.getContext("2d");
		        ctx.drawImage(image, 0, 0, image.width, image.height);
		//         var data = this.info.select_form;
		//         for (var i in data) {
		//           ctx.fillStyle = data[i].color;
		//           ctx.font = data[i].fontSize + "px Arial";
		//           ctx.fillText(
		//             data[i].value,
		//             canv.width * data[i].rate_x + 10,
		//             canv.height * data[i].rate_y + 22
		//           );
		//         }
		        //ctx.stroke();
		        let url = canv.toDataURL("image/png");
		        let a = document.createElement("a");
		        let event = new MouseEvent("click");
		        a.download = name;
		        a.href = url;
		        a.dispatchEvent(event);
		      };
		      image.src = url
		    },
		// result() {
		// 	// uni.showLoading({
		// 	// 	title: '图片绘制中...',
		// 	// });
		// 	var that = this;
		// 	var url ="../../static/othertwo/wechat_banner1.png";
		// 	var city = this.runinfo.City
		// 	const ctx = uni.createCanvasContext('myCanvas')
		// 	ctx.drawImage(that.banner_p, 0, 0, 272, 332)
		// 	 // console.log (this.user_head)
		// 	// ctx.drawImage('https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3256100974,305075936&fm=26&gp=0.jpg', 30,20,63,63)
		// 	var image = new Image()
		// 	image.setAttribute("crossOrigin",'anonymous');
		// 	// ctx.drawImage(this.user_head, 30,20,63,63)
		// 	ctx.setFillStyle('#333'); //设置内容1的文字样式
		// 	ctx.setFontSize(14);
		// 	const metrics = ctx.measureText(this.runinfo.Title)
		// 	ctx.fillText(this.runinfo.Title, 100, 38); //计算距离，将文字定位于图片的某处
		// 	ctx.drawImage(this.img_src.vip, (100+metrics.width), 25, 13, 14);
		// 	// 设置id
		// 	ctx.setFillStyle('#333'); //设置内容2的文字样式
		// 	ctx.setFontSize(12);
		// 	// ctx.setTextAlign('center')  //同上
		// 	 // console.log (this.runinfo.IdCode)
		// 	ctx.fillText(this.runinfo.IdCode, 100, 60);	
		// 	//s设置城市
		// 	ctx.setFillStyle('#333'); //设置内容2的文字样式
		// 	ctx.setFontSize(12);
		// 	// ctx.setTextAlign('center')  //同上
		// 	ctx.fillText(city, 100, 76);
		// 	// ctx.drawImage(this.user_head, 30, 120, 200, 160);
		// 	ctx.draw(false, function() {
		// 		uni.canvasToTempFilePath({
		// 			canvasId: 'myCanvas',
		// 			success: function(res) {
		// 				 // console.log (res)
		// 				var img_type = res.tempFilePath.split(';')[0].split('/')[1];
		// 				uni.hideLoading()
		// 				 // console.log (res.tempFilePath)
		// 				that.base = res.tempFilePath
		// 				var image = new Image();      
		// 				image.src = res.tempFilePath;
		// 				that.downImg(res.tempFilePath)
		// 				// base64ToPath(res.tempFilePath)
		// 				//   .then(path => {
		// 				// 	that.base = path+'.'+img_type
		// 				// 	 // console.log (that.base)
		// 				// 	uni.saveImageToPhotosAlbum({
		// 				// 		filePath: that.base,
		// 				// 		success: function(res) {
		// 				// 			 // console.log (res);
		// 				// 			uni.showToast({
		// 				// 				title: '图片已保存'
		// 				// 			})
		// 				// 		}
		// 				// 	})
		// 				//   })
		// 				//   .catch(error => {
		// 				//     console.error(error)
		// 				//   })
						
		// 			},
		// 			fail: (res) => {
		// 				 // console.log (res)
		// 			}
		// 		})
			
		// 	})
		// 	/* // uniapp 画布
			
		// 	uni.showLoading({
		// 		//增加loading等待效果
		// 		mask: true
		// 	});
		// 	const ctx = uni.createCanvasContext('myCanvas'); //绑定画布
		// 	// 设置背景
		// 	ctx.drawImage(this.img_src.banner, 0, 0, 1088, 1344);
		// 	ctx.drawImage(this.img_src.header, 120, 80, 252, 252);
		// 	ctx.setFillStyle('#333'); //设置内容1的文字样式
		// 	ctx.setFontSize(56);
		// 	ctx.fillText(this.info.title, 400, 152); //计算距离，将文字定位于图片的某处
		// 	// 设置标题后面的图片
		// 	ctx.drawImage(this.img_src.vip, 864, 100, 52, 56);
		// 	// 设置id
		// 	ctx.setFillStyle('#333'); //设置内容2的文字样式
		// 	ctx.setFontSize(48);
		// 	// ctx.setTextAlign('center')  //同上
		// 	ctx.fillText(this.info.id, 400, 240);	
		// 	//s设置城市
		// 	ctx.setFillStyle('#333'); //设置内容2的文字样式
		// 	ctx.setFontSize(48);
		// 	// ctx.setTextAlign('center')  //同上
		// 	ctx.fillText(this.info.city, 400, 304);
		// 	// 设置小程序吗
		// 	// img.src = this.img_src.ewm
		// 	ctx.drawImage(this.img_src.ewm, 120, 480, 800, 640);
		// 	ctx.draw(false, function() {
		// 		uni.canvasToTempFilePath({
		// 			x: 0,
		// 			y: 0,
		// 			width: 1088,
		// 			height: 1344,
		// 			destWidth: 1088,
		// 			destHeight: 1344,
		// 			canvasId: 'myCanvas',
		// 			success: function(res) {
		// 				uni.hideLoading();
		// 				//  // console.log (res.tempFilePath)
		// 				uni.saveImageToPhotosAlbum({
		// 					filePath: res.tempFilePath,
		// 					success: function(res) {
		// 						 // console.log (res);
		// 						uni.showToast({
		// 							title: '图片已保存'
		// 						});
		// 					}
		// 				});
		// 			}
		// 		});
		// 	}); //输出到画布中 */
			
		// 	// uni.showLoading({
		// 	// 	//增加loading等待效果
		// 	// 	mask: true
		// 	// });
		// 	// setTimeout(() => {
		// 	// 	//不加延迟的话，base64有时候会赋予undefined
		// 	// 	uni.canvasToTempFilePath({
		// 	// 		x: 0,
		// 	// 		y: 0,
		// 	// 		width: 1088,
		// 	// 		height: 1344,
		// 	// 		destWidth: 1088,
		// 	// 		destHeight: 1344,
		// 	// 		canvasId: 'myCanvas',
		// 	// 		success: res => {
		// 	// 			uni.hideLoading();
		// 	// 			this.base = res.tempFilePath;
		// 	// 			 // console.log (this.base)
		// 	// 		}e 
		// 	// 	});
		// 	// }, 800);
		// 	// uni.downloadFile({
		// 	//     url: this.img_src.header, //仅为示例，并非真实的资源
		// 	//     success: (res) => {
		// 	//        // console.log (res)
		// 	//     }
		// 	// });
		// 	// 原生canvas
		// 	// const box = document.getElementsByClassName('box')[0]
		// 	// const canvas = document.createElement('canvas')
		// 	// canvas.height = 332
		// 	// canvas.width = 272
		// 	// const ctx = canvas.getContext('2d')
		// 	// box.appendChild(canvas)
		// 	// // 设置背景
		// 	// var img_banner = new Image()
		// 	// img_banner.src = this.img_src.banner
		// 	// var img_vip = new Image()
		// 	// img_vip.src = this.img_src.vip
		// 	// var img_ewm = new Image()
		// 	// img_ewm.src = this.img_src.ewm
		// 	// var img = new Image()
		// 	// img.src = this.img_src.header;
		// 	// window.onload = () => {
		// 	// 	ctx.drawImage(img_banner,0,0,272,337)
		// 	// 	ctx.drawImage(img,50, 20, 63, 63)
		// 	// 	// img.src = this.img_src.header
		// 	// 	// ctx.drawImage(img, 50, 20, 63, 63); //填充进图片
		// 	// 	// // 设置标题
		// 	// 	ctx.beginPath()
		// 	// 	ctx.fillStyle = '#333'
		// 	// 	ctx.font="14px";
		// 	// 	ctx.fillText(this.info.title,120,35)
		// 	// 	ctx.closePath()
		// 	// 	ctx.beginPath()
		// 	// 	ctx.fillStyle = '#333'
		// 	// 	ctx.font="12px";
		// 	// 	ctx.fillText(this.info.id,120,60)
		// 	// 	ctx.closePath()
		// 	// 	ctx.beginPath()
		// 	// 	ctx.fillStyle = '#333'
		// 	// 	ctx.font="12px";
		// 	// 	ctx.fillText(this.info.city,120,76)
		// 	// 	ctx.closePath()
		// 	// 	// 设置vip logo
		// 	// 	ctx.drawImage(img_vip,205, 25, 13, 14)
		// 	// 	// 设置二维码
		// 	// 	ctx.drawImage(img_ewm,30, 125, 200, 160)
		// 	// }
		// 	//绘制图片
		// 	// 刘昊给的
		// 	//    saveImage(data) {
		// 	//     uni.showLoading({
		// 	//      title: '图片绘制中...',
		// 	//     });
		// 	//     var url = data.srco;
		// 	//     const context = uni.createCanvasContext('myCanvas')
		// 	//     context.drawImage(url, 0, 0, 325, 467)
		// 	//     context.drawImage(this.qr_code, 325 / 2 - 80 / 2, 570 / 2, 80, 80)
		// 	//     context.drawImage(this.user_head, 325 / 2 - 20 / 2, 570 / 2 + 30, 20, 20)
		// 	//     // context.drawImage("../../../../static/fxb1.jpg", (this.windowWidth - 251) / 2, 7 * (this.windowHeight / 8), 78, 24)
		// 	//     // context.drawImage("../../../../static/fxb2.jpg", (this.windowWidth - 251) / 2 + 88, 7 * (this.windowHeight / 8), 78,
		// 	//     //  24)

		// 	//     //context.setFillStyle("#FEEDBB")
		// 	//     context.rect((325 - 251) / 2 + 55, 7 * (467 / 8) - 35, 140, 20);
		// 	//     context.setFillStyle('#000000');
		// 	//     context.fill();
		// 	//     context.setFontSize(12)
		// 	//     context.setFillStyle('#ffffff');
		// 	//     context.fillText('邀请人：' + this.tj_user, (325 - 251) / 2 + 65, 7 * (467 / 8) - 20);
		// 	//     context.setFillStyle('#000000');
		// 	//     context.fillText('扫描二维码下载积分兑了么', (325 - 251) / 2 + 55, 7 * (467 / 8) + 8);
		// 	//     context.draw(false, function() {
		// 	//      uni.canvasToTempFilePath({
		// 	//       canvasId: 'myCanvas',
		// 	//       success: function(res) {
		// 	//        uni.hideLoading()
		// 	//        //  // console.log (res.tempFilePath)
		// 	//        uni.saveImageToPhotosAlbum({
		// 	//         filePath: res.tempFilePath,
		// 	//         success: function(res) {
		// 	//           // console.log (res);
		// 	//          uni.showToast({
		// 	//           title: '图片已保存'
		// 	//          })
		// 	//         }
		// 	//        })
		// 	//       }
		// 	//      })

		// 	//     })
		// 	//    }
		
		// },

	}
};
</script>

<style lang="less" scoped>
@import url('../../static/less/pageB/run/runcard.less');
</style>

<style>
page {
	background-color: #F2F2F2;
	overflow: hidden;
}
</style>
